<template>
  <div class="dev-dropdown">
    <bf-dropdown
      :hide-on-click="false"
      @click="handleClick"
      @click-outside="handleClickOutside"
      :renderHtml="false"
    >
      <bf-button type="text">下拉菜单</bf-button>
      <bf-dropdownMenu slot="menu">
        <bf-dropdownMain name="name-1">11</bf-dropdownMain>
        <bf-dropdownMain name="name-2">22</bf-dropdownMain>
        <bf-dropdownMain name="name-3">33</bf-dropdownMain>
        <bf-dropdownMain name="name-4">44</bf-dropdownMain>
        <bf-dropdownMain name="name-5" divided>55</bf-dropdownMain>
      </bf-dropdownMenu>
    </bf-dropdown>
    <bf-dropdown trigger="click">
      <bf-button type="primary">下拉菜单</bf-button>
      <bf-dropdownMenu slot="menu">
        <bf-dropdownMain>333</bf-dropdownMain>
        <bf-dropdownMain>22</bf-dropdownMain>
        <bf-dropdownMain>22</bf-dropdownMain>
        <bf-dropdownMain>年</bf-dropdownMain>
        <bf-dropdownMain divided>22</bf-dropdownMain>
      </bf-dropdownMenu>
    </bf-dropdown>
    <bf-dropdown trigger="contextmenu">
      <bf-button type="primary">下拉菜单</bf-button>
      <bf-dropdownMenu slot="menu">
        <bf-dropdownMain>333</bf-dropdownMain>
        <bf-dropdownMain>22</bf-dropdownMain>
        <bf-dropdownMain>22</bf-dropdownMain>
        <bf-dropdownMain>22</bf-dropdownMain>
        <bf-dropdownMain divided>22</bf-dropdownMain>
      </bf-dropdownMenu>
    </bf-dropdown>
    <bf-dropdown trigger="custom" :visible="visible">
      <bf-button type="text" @click="visible = true">下拉菜单</bf-button>
      <bf-dropdownMenu slot="menu">
        <p>常用于各种自定义下拉内容的场景。</p>
        <div style="text-align: right;">
          <bf-button type="primary" @click="visible = false">关闭</bf-button>
        </div>
      </bf-dropdownMenu>
    </bf-dropdown>
    <bf-dropdown @click="handleClick">
      <bf-button type="primary">下拉菜单</bf-button>
      <bf-dropdownMenu slot="menu">
        <bf-dropdownMain name="name-1">11</bf-dropdownMain>
        <bf-dropdownMain name="name-2">1-2</bf-dropdownMain>
        <bf-dropdown placement="right-start">
          <bf-dropdownMain name="name-3">1-3</bf-dropdownMain>
          <bf-dropdownMenu slot="menu">
            <bf-dropdownMain name="name-3-1">2-3-1</bf-dropdownMain>
            <bf-dropdownMain name="name-3-2">3-3-1</bf-dropdownMain>
            <bf-dropdownMain name="name-3-3">4-3-3</bf-dropdownMain>
            <bf-dropdownMain name="name-3-4">5-3-4</bf-dropdownMain>
            <bf-dropdownMain name="name-3-5" divided>6-3-5</bf-dropdownMain>
          </bf-dropdownMenu>
        </bf-dropdown>
        <bf-dropdownMain name="name-4">7-4</bf-dropdownMain>
        <bf-dropdownMain name="name-5" divided>8-5</bf-dropdownMain>
      </bf-dropdownMenu>
    </bf-dropdown>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    handleClick(name) {
      console.log("click-", name);
    },
    handleClickOutside() {
      console.log("handleClickOutside");
    },
  },
};
</script>

<style lang="scss" scoped>
.dev-dropdown {
  padding-bottom: 200px;
}
</style>
